<template>
  <s-modal
    title="添加"
    :visible="visible"
    width="800px"
    ok-text="保存"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div style="height: 400px">
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <s-form-item
            label="用户账号"
            name="userName"
            :rules="[
              { whitespace: true, required: true, message: '用户账号不能为空' },
              { max: 50, message: '最长为50' }
            ]"
          >
            <s-input v-model="formValue.userName" placeholder="用户账号" />
          </s-form-item>
          <s-form-item
            label="密码"
            name="password"
            :rules="[
              { whitespace: true, required: true, message: '密码不能为空' },
              { max: 50, message: '最长为50' }
            ]"
          >
            <s-input v-model="formValue.password" allow-clear placeholder="密码" />
          </s-form-item>
          <s-form-item label="昵称" name="nickName" :rules="[{ max: 50, message: '最长为50' }]">
            <s-input v-model="formValue.nickName" allow-clear placeholder="昵称" />
          </s-form-item>
          <s-form-item label="所属部门" name="orgId">
            <s-select-tree
              v-model="formValue.orgId"
              placeholder="请选择"
              url="/realm/dept/selectList"
              value-field="id"
              label-field="text"
              :allow-clear="true"
            />
          </s-form-item>
          <s-form-item label="角色" name="roles">
            <s-select
              v-model="formValue.roles"
              height="200px"
              url="/authority/role/selectList"
              value-field="value"
              label-field="text"
              mode="multiple"
              placeholder="角色"
            />
          </s-form-item>
          <s-form-item label="菜单" name="menu">
            <s-select
              v-model="formValue.menu"
              height="200px"
              url="/menu/template/selectList"
              value-field="id"
              label-field="templateName"
              placeholder="菜单"
            />
          </s-form-item>
          <s-form-item
            label="手机号"
            name="phone"
            :rules="[
              { max: 50, message: '最长为50' },
              { pattern: /^1\d{10}$/, message: '必须为手机号' }
            ]"
          >
            <s-input v-model="formValue.phone" allow-clear placeholder="手机号" />
          </s-form-item>
          <s-form-item
            label="邮箱"
            name="email"
            :rules="[
              { max: 50, message: '最长为50' },
              {
                pattern: /(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
                message: '必须为邮箱'
              }
            ]"
          >
            <s-input v-model="formValue.email" allow-clear placeholder="邮箱" />
          </s-form-item>
          <s-form-item label="头像" name="headPortrait">
            <s-img v-model="formValue.headPortrait" :max="1" />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'Add',

  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
      this.fakeValue = {}
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        this.confirmLoading = true
        this.$api
          .PUT('/realm/user/insert', values)
          .then((res) => {
            this.confirmLoading = false
            this.visible = false
            this.$emit('success')
            this.$message.info(res.msg)
          })
          .catch(() => {
            this.confirmLoading = false
          })
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
